<template>
    <div class="container-brand">
        <el-row class="wrap-search">
            <el-button  class="search-btn" type="primary" @click="addPhoto()">新增广告</el-button>
        </el-row>
        <div class="">
            <table-list ref="tableList" :tableConfig='configList'>
                 <el-table-column  slot="num"  align="center" label="序号">
                      <template slot-scope="scope">
                          {{scope.row.indexNum}}
                      </template>
                  </el-table-column>
                  <el-table-column  slot="image"  align="center" label="图片">
                      <template slot-scope="scope">
                          <img class="video-img" @click="imgClick(scope.row.images[0].fileUrl)" :src="scope.row.images[0].fileUrl" alt="">
                      </template>
                  </el-table-column>
                  <el-table-column class="btn" label="操作" slot="btn" align="center" >
                    <template slot-scope="scope">
                        <el-button @click="editBrand(scope.row.url,scope.row.images,scope.row.id)" type="primary" size="small">编辑</el-button>
                        <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
            </table-list>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            size="tiny"
            >
            <img :src="imgUrl" alt="">
        </el-dialog>
        <el-dialog
            title="新增/编辑广告"
            :visible.sync="dialogVisible1"
            width="30%"
            >
            <div class="dialog-content">
                <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                    <el-form-item class="logo" label="图片：" prop="images">
                        <el-upload  list-type="picture-card" 
                            :class="{uploadShow:uploadShow}"
                            :action="upLoadUrl"    
                            :file-list='fileShowList'
                            :on-success="handleFileSuccess"   
                            :on-preview="handlePictureCardPreview"  
                            :on-remove="handleRemove">   
                            <i class="el-icon-plus"></i> 
                        </el-upload> 
                        <div class="tip">*建议上传尺寸：750*420</div>
                        <el-dialog :visible.sync = "dialogVisible" size="tiny"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog>
                    </el-form-item>
                    <el-form-item label="外部链接" prop="url">
                        <el-input v-model="information.url" placeholder="请输入外部链接"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('information')" >确 定</el-button>
                        <el-button @click="cancelBtn" type="primary">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return { 
            configList:{
                url:CONSTANT.URL.ACTIVITY.ADLIST,
                configList:[
                    {
                       slot:'num'
                    },
                    {
                       slot:'image'
                    },
                    {
                       label:'外部链接',
                       prop:'url'
                    },
                    {
                      slot:'btn'
                    },
                    
                ],
                param:{
                    
                },
                type:'',
                width:'',
                isPagination:true
            },
            information: {
                url:"",
                images:""
            },
            dialogImageUrl:'',
            rules: {
                images:[
                    {required: true, message: '请上传图片', trigger: 'change'  }
                ]
            },
            uploadShow:false,
            dialogVisible:false,
            dialogVisible1:false,
            imgUrl:'',
            upLoadUrl:'',
            fileShowList:[]
        }
    },
    components: {
        'table-list':() => import('../common/my-table')
    },  
    mounted() {
        let sessionId = common.getCookie('sessionId');
        this.upLoadUrl =CONSTANT.URL.COMMON.UPLOAD+ '?sessionId='+sessionId;
    },
    methods: {
        getList(){
            this.$refs.tableList.getList()
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        dialogConfirm(){

        },
        addPhoto(){
            this.id = '';
            this.fileShowList = [];
            this.information.images = '';
            this.dialogVisible1 = true;
            this.uploadShow = false;
            this.information.url = ''
        },
        cancelBtn(){
            this.dialogVisible1 = false;
        },
        delLevel(id){
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.ACTIVITY.ADDELETE,
                    param = {id:id}
                common.requestAjax(url,{},param,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });   
        },
        handleRemove(file, fileList) {      // 图片上传
            this.uploadShow = false;
            this.information.images = '';
        },       
        handlePictureCardPreview(file) {    
            console.log(file)
            this.dialogImageUrl = file.url;         
            this.dialogVisible = true;      
        },
        handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.images = picItem;
                this.uploadShow = true;
            }
        },
        editBrand(url,image,id){
            console.log(url,image)
            this.fileShowList = [];
            this.dialogVisible1 = true;
            this.uploadShow = true;
            this.fileShowList.push({
                url:image[0].fileUrl
            })
            this.id = id;
            this.information.images = image
            this.information.url = url
        },
        submitForm(formName) {
          console.log(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = CONSTANT.URL.ACTIVITY.ADEDIT;
            let data = {
                    url: this.information.url,
                    images:this.information.images
            };
            if(this.id != ''){
               data.id = this.id;
           }
            let param = JSON.stringify(data);
            common.requestAjax(url,param,{},res => {
                console.log(res)
                if(res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                    this.getList();
                    this.dialogVisible1 = false;  
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
}
</script>

<style lang="scss">
        .v-modal{
            z-index: 2000!important;
        }
    .container-brand {
        .tip{
            position: relative;
            font-size: 14px;
            color: red;
        }
        .el-dialog{
            box-shadow:0 1px 3px rgba(255, 192, 192, 0)!important;
        }
        .uploadShow  .el-upload{display: none;}
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            img.video-img{
                width: 100px!important;
                height: 50px;
                cursor: pointer;
            }
        }
        .content-list{
            overflow: auto;
            margin-bottom: 20px;
            .list-name{
                float: left;
                width: 30%;
                text-align: right;
            }

            .list-content{
                float: left;
                width: 60%;
                margin-left: 8%;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
                width: 400px;
            }
            .el-upload-list__item img{
                width: 100%!important;
            }
        }
    }
</style>
